import React from 'react';
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'

const LeftNavWrapper = styled.ul`
  li {
    .active {
      background:red;
      padding:10px 10px;
      color: #fff;
    }
  } 
`

const LeftNav = (props) => {
  const { leftUrl } = props;
  return <LeftNavWrapper>
    {
      leftUrl.map((item, index) => {
        return <li key={item.path} style={{
          width: '100%',
          height: '60px',
          lineHeight: '60px',
          textAlign: "center"
        }}>
          <NavLink to={item.path}>
            {item.text}
          </NavLink>
        </li>
      })
    }
  </LeftNavWrapper>
}

export default LeftNav;